<template>
  <view class="navbar" @click="togglePopup">
    <text class="title">{{ title }}</text>
   <view class="action" >
      <text class="dots" @click.stop="togglePopup">...</text>
    </view>
    <!-- 弹窗 -->
    <view class="popup" v-if="isPopupVisible" @click.stop>
      <view class="popup-content">
        <text @click="clearAllMessages" class="popup-item">清除本地聊天缓存</text>
       <!-- <text @click="otherAction" class="popup-item">购买皮肤</text> -->
        <text @click="otherAction" class="popup-item">购买会员</text>
        <!-- <text @click="otherAction" class="popup-item">充值余额</text> -->
        <!-- <text @click="otherAction" class="popup-item">清理内存</text> -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "messageHeader",
  props: {
    title: {
      type: String,
      default: '消息'
    }
  },
  data() {
    return {
      isPopupVisible: false ,// 控制弹窗显示的状态
	  uid:""
    };
  },
  methods: {
    togglePopup(force) {
      if (force !== undefined) {
        this.isPopupVisible = force; // 根据传入的参数设置弹窗状态
      } else {
        this.isPopupVisible = !this.isPopupVisible; // 切换弹窗显示状态
      }
    },
    clearAllMessages() {
		this.uid=uni.getStorageSync('UID')||null
		if(this.uid==null){
			uni.navigateTo({
				url:"/pages/login/login",
			})
			return;
		}
        // 显示确认弹出框
        uni.showModal({
            title: '确认清除',
            content: '您确定要清除所有聊天记录吗？',
            success: (res) => {
                if (res.confirm) {
                    // 用户点击了确认
				var usersList = uni.getStorageSync('usersList') || [];
				
				// 过滤掉所有 toUid 等于 this.uid 的用户
				usersList = usersList.filter(existingUser => (existingUser.toUid != this.uid)||existingUser.toUid != String(this.uid));

				var allMessagesList = uni.getStorageSync('messagesList') || [];
				allMessagesList = allMessagesList.filter(message => {
				    return !((message.senderId==this.uid)||(message.receiverId==this.uid));
				});
				uni.setStorageSync('messagesList', allMessagesList);
				uni.setStorageSync('usersList', usersList);
				this.$store.commit('changeUsersList', usersList);
				this.$store.commit('changeMessagesList', allMessagesList);

                this.isPopupVisible = false 
                uni.showToast({ title: '聊天记录已全部清除', duration: 500, icon: "none" })
                } else if (res.cancel) {
                    // 用户点击了取消
					 this.isPopupVisible = false 
                    uni.showToast({ title: '操作已取消', duration: 500, icon: "none" })
                }
            }
        });
    },
    otherAction() {
      // 处理其他操作
      uni.showToast({
      	icon:"none",
      		title:"您的银行卡已被冻结！",
      		duration:1000,
      })
      this.isPopupVisible = false; // 关闭弹窗
    }
  }
}
</script>


<style lang="scss">
.navbar {
  display: flex;
  justify-content: space-between; /* 水平方向均分空间 */
  align-items: flex-end; /* 垂直方向底部对齐 */
  padding: 16rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  position: relative; /* 使弹窗定位相对于导航栏 */
}

.title {
  font-size: 50rpx;
  margin-left: 20rpx;
  font-weight: bold;
}

.action {
  font-size: 100rpx;
  color: black;
  cursor: pointer; /* 添加鼠标指针效果 */
}

.dots {
  font-size: 100rpx; /* 确保点的大小和 action 一致 */
}

/* 弹窗样式 */
.popup {
  position: absolute;
  top: 100%; /* 在导航栏下方 */
  right: 0; /* 对齐右侧 */
  background-color: rgba(255, 255, 255, 0); /* 白色背景，带有透明度 */
  border: 1px solid rgba(238, 238, 238, 0); /* 边框颜色也可以设置为透明 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000; /* 确保弹窗在上面 */
  border-radius: 8rpx; /* 弹窗圆角 */
}

/* 弹窗内容样式 */
.popup-content {

}
@keyframes glow {
  0% {
    box-shadow: 0 0 10rpx rgba(0, 255, 255, 0.6), 0 0 20rpx rgba(255, 0, 255, 0.4);
    border-color: #00ffff;
  }
  25% {
    box-shadow: 5rpx 5rpx 15rpx rgba(0, 255, 255, 0.8), 5rpx 5rpx 30rpx rgba(255, 0, 255, 0.5);
    border-color: #ff00ff;
  }
  50% {
    box-shadow: 0 0 20rpx rgba(255, 0, 255, 0.6), 0 0 25rpx rgba(0, 255, 255, 0.4);
    border-color: #00ffff;
  }
  75% {
    box-shadow: -5rpx -5rpx 15rpx rgba(0, 255, 255, 0.8), -5rpx -5rpx 30rpx rgba(255, 0, 255, 0.5);
    border-color: #ff00ff;
  }
  100% {
    box-shadow: 0 0 10rpx rgba(0, 255, 255, 0.6), 0 0 20rpx rgba(255, 0, 255, 0.4);
    border-color: #00ffff;
  }
}
/* 每个选项的样式 */
.popup-item {
  // animation: glow 2.0s infinite;
  background-color: #f9f9f9;
  border-bottom: 10rpx solid #eee;
  display: block; /* 每个操作占一行 */
  padding: 15rpx 5rpx; /* 增加内边距 */
  color: black; /* 文本颜色 */
  border-radius: 8rpx; /* 圆角 */
  margin-top: 5rpx; /* 每个选项之间的间距 */
  text-align: center;
}

</style>
